function calculateSum(arr) {
  var sum = 0;
  for (var i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}

document.addEventListener("DOMContentLoaded", function() {
  let context = $("#stat_chart").get(0).getContext('2d');
  
  let labels = JSON.parse(context.canvas.dataset.dates);
  let registered_users = JSON.parse(context.canvas.dataset.registered_users);
  let proxies_created = JSON.parse(context.canvas.dataset.proxies_created);
  let orders_created = JSON.parse(context.canvas.dataset.orders_created);
  let servers_added = JSON.parse(context.canvas.dataset.servers_added);
  let mobile_proxies_bought = JSON.parse(context.canvas.dataset.mobile_proxies_bought);
  let server_proxies_bought = JSON.parse(context.canvas.dataset.server_proxies_bought);
  let payments_payed = JSON.parse(context.canvas.dataset.payments_payed);
  let messages_sent = JSON.parse(context.canvas.dataset.messages_sent);
  
  let chart
  chart = new Chart(context, {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
          label: "Registered users",
          data: registered_users,
          fill: true,
          lineTension: 0.2,
          backgroundColor: "rgba(54, 162, 235, 0.5)",
          borderColor: "rgb(54, 162, 235)",
          borderWidth: 1.2
        },
        {
          label: "Proxies created",
          data: proxies_created,
          fill: true,
          lineTension: 0.2,
          backgroundColor: "rgba(104, 107, 255, 0.5)",
          borderColor: "rgb(104, 107, 255)",
          borderWidth: 1.2
        },
        {
          label: "Orders created",
          data: orders_created,
          fill: true,
          lineTension: 0.2,
          backgroundColor: "rgba(160, 64, 255, 0.5)",
          borderColor: "rgb(160, 64, 255)",
          borderWidth: 1.2
        },
        {
          label: "Servers added",
          data: servers_added,
          fill: true,
          lineTension: 0.2,
          backgroundColor: "rgba(48, 198, 124, 0.5)",
          borderColor: "rgb(48, 198, 124)",
          borderWidth: 1.2
        },
        {
          label: "Mobile proxies bought",
          data: mobile_proxies_bought,
          fill: true,
          lineTension: 0.2,
          backgroundColor: "rgba(242,146,237, 0.5)",
          borderColor: "rgb(242,146,237)",
          borderWidth: 1.2
        },
        {
          label: "Server proxies bought",
          data: server_proxies_bought,
          fill: true,
          lineTension: 0.2,
          backgroundColor: "rgba(228,233,93, 0.5)",
          borderColor: "rgb(228,233,93)",
          borderWidth: 1.2
        },
        {
          label: "Payments payed",
          data: payments_payed,
          fill: true,
          lineTension: 0.2,
          backgroundColor: "rgba(255, 51, 51, 0.5)",
          borderColor: "rgb(255, 51, 51)",
          borderWidth: 1.2
        },
        {
          label: "Messages sent",
          data: messages_sent,
          fill: true,
          lineTension: 0.2,
          backgroundColor: "rgba(26, 140, 206, 0.5)",
          borderColor: "rgb(26, 140, 206)",
          borderWidth: 1.2
        },
      ]
    },
    options: {
      responsive: true
    },
  })

  $("#changeDateButton").click(() => {
    let data = { date_from: $('#datefrom').val(), date_to: $('#dateto').val() };
    var response = $.post(window.location.href, data)
    response.done(function(chartData) {
      chart.data.labels = chartData[0]
      chart.data.datasets[0].data = chartData[1].registered_users
      chart.data.datasets[1].data = chartData[1].proxies_created
      chart.data.datasets[2].data = chartData[1].orders_created
      chart.data.datasets[3].data = chartData[1].servers_added
      chart.data.datasets[4].data = chartData[1].mobile_proxies_bought
      chart.data.datasets[5].data = chartData[1].server_proxies_bought
      chart.data.datasets[6].data = chartData[1].payments_payed
      chart.data.datasets[7].data = chartData[1].messages_sent
      chart.update();

      try {
        $("#proxies_created").text(calculateSum(chartData[1].proxies_created));
        $("#registered_users").text(calculateSum(chartData[1].registered_users));
        $("#servers_added").text(calculateSum(chartData[1].servers_added));
        $("#orders_created").text(calculateSum(chartData[1].orders_created));
      } catch (e) {
        console.log(e);
      }

      $('#table_stats').find('tbody')[0].innerHTML = '';
      var dates = chartData[0];
      var column_data = chartData[1].table_rows;
      var rows_sums = chartData[1].rows_sums;
      
      var tab = []
      for (var i = 0; i < column_data.length - 1; i++) {
        tab += '<tr>'
        tab += '<td>' + dates[i] + '</td>'
        column_data[i].forEach(function(item) {
          tab += '<td>' + item + '</td>'
        })
        tab += '</tr>'
      }

      tab += '<tr>'
      tab += '<td> Total: </td>'
      rows_sums.forEach(function(item) {
        tab += '<td>' + item + '</td>'
      })

      tab += '</tr>'

      $('#table_stats').find('tbody')[0].innerHTML = tab;
    });
  });
});